<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本使用</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    Vue中使用组件的三大步骤：
      一.定义组件（创建组件）
        使用Vue.extend(options)创建，其中options 和new Vue(options)时传入的那个options几乎一样，但也有点区别。
        区别如下：
          1.el不要写——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
          2.data必须写成函数——避免组件被复用时，数据存在引用关系
        备注：使用template可以配置组件结构
      二.注册组件
          1.局部注册：靠new Vue的时候传入components选项
          2.全局注册：靠Vue.component('组件名',组件)
      三.使用组件（编写组件标签）
           <student></student>
-->

<!-- 准备好一个容器-->
<div id="root">
  <hello></hello>
  <hr>
  <!--第三步：编写组件标签-->
  <xuexiao></xuexiao>
  <hr>
  <student></student>
</div>
<div id="root2">
  <hr>
  <hello></hello>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  //  第一步：创建school组件
  const school = Vue.extend({
    template: `
      <div>
      <h2>学校名称：{{ schoolName }}</h2>
      <h2>学校地址：{{ address }}</h2>
      <button @click="showSchoolName">点我提示学校名</button>
      </div>
    `,
    // el: '#root', 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京',
      }
    },
    methods:{
      showSchoolName(){
        alert(this.schoolName)
      }
    }
  })
  //  创建student组件
  const student = Vue.extend({
    template: `
      <div>
      <h2>学生姓名：{{ studentName }}</h2>
      <h2>学生年龄：{{ age }}</h2>
      </div>
    `,
    // el: '#root', 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data() {
      return {
        studentName: '金串串',
        age: 18
      }
    },
  })
  const hello=Vue.extend({
    template: `
      <div>
      <h2>你好啊！</h2>
      </div>
    `,
  })
  // 第二步：注册组件(全局)
  Vue.component('hello',hello)

  //  创建vm
  new Vue({
    el: '#root',
    // 第二步：注册组件（局部注册）
    components: {
      xuexiao: school,
      //student:student 简写
      student
    }
  })//  创建vm
  new Vue({
    el: '#root2',

  })
</script>
</html>